<template>
  <div class="builder-container">

    <Tabs size="small">
      <TabPane label="基本配置">
        <Form :label-width="150">
          <FormItem label="标签">
            <Input size="small" v-model="obj.title" placeholder=""/>
          </FormItem>
          <FormItem label="字段名称">
            <Input size="small" v-model="obj.field" placeholder=""/>
          </FormItem>
          <FormItem label="默认值">
            <Input size="small" v-model="obj.value" :number="true" placeholder=""/>
          </FormItem>

          <FormItem label="最小值">
            <InputNumber size="small" :max="10000000" :min="0" v-model="obj.props.min"></InputNumber>
          </FormItem>
          <FormItem label="最大值">
            <InputNumber size="small" :max="10000000" :min="0" v-model="obj.props.max"></InputNumber>
          </FormItem>
          <FormItem label="每次改变的步数">
            <InputNumber size="small" :max="10000000" :min="0" v-model="obj.props.step"></InputNumber>
            <p class="color-red" style="line-height: 16px;">取值建议能被（最大值-最小值）整除</p>
          </FormItem>
          <FormItem label="是否禁用状态">
            <i-switch v-model="obj.props.disabled">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="开启双滑块模式">
            <i-switch v-model="obj.props.range" @on-change="rangeChangeHandler">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="显示数字输入框">
            <i-switch v-model="obj.props.showInput">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="数字输入框尺寸">
            <Select :transfer="true" size="small" v-model="obj.props.inputSize">
              <Option value="default">默认</Option>
              <Option value="small">小型</Option>
              <Option value="large">大型</Option>
            </Select>
          </FormItem>
          <FormItem label="显示间断点">
            <i-switch v-model="obj.props.showStops">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="提示的显示控制">
            <Select :transfer="true" size="small" v-model="obj.props.showTip">
              <Option value="hover">悬停</Option>
              <Option value="always">总是可见</Option>
              <Option value="never">不可见</Option>
            </Select>
          </FormItem>


          <FormItemPanel title="栅格布局配置">
            <FormItem label="栅格列数COL">
              <InputNumber size="small" :max="24" :min="1" v-model="obj.col.span"></InputNumber>
            </FormItem>
            <FormItem label="偏移数OFFSET">
              <InputNumber size="small" :max="24" :min="0" v-model="obj.col.offset"></InputNumber>
            </FormItem>
          </FormItemPanel>
        </Form>
      </TabPane>
      <TabPane label="校验规则">
        <CValidatePanel v-model="obj"></CValidatePanel>
      </TabPane>
      <!--<TabPane label="事件监听"></TabPane>-->
    </Tabs>

  </div>
</template>

<script>
  import '../CustomForm.css'

  export default {
    name: 'CSliderBuilder',
    props: {
      value: {
        type: Object
      }
    },
    data() {
      return {
        obj: this.value
      }
    },
    mounted() {

    },
    methods: {
      rangeChangeHandler (value) {
        if (value) {
          this.obj.value = [0, 50]
        }else {
          this.obj.value = 0
        }
      }
    },
    computed: {

    },
    watch: {
      value (val) {
        this.obj = val;
      },
      obj (val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
